<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
				overflow: hidden;
				background: pink;
			}
			
			#clock {
				background: gray;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%, -50%, 0);
			}
		</style>
	</head>

	<body>
		<canvas id="clock" width="400" height="400"></canvas>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var canvas = document.querySelector("#clock");
			if(!canvas.getContext) return;
			var ctx = canvas.getContext("2d");

			ctx.save();

			/*
			 * 这一部分是定义一个全局的连段的宽度
			 * 颜色
			 * 线段头尾是圆的
			 * */
			ctx.lineWidth = 8;
			ctx.strokeStyle = "black";
			ctx.lineCap = "round"
			/*移动坐标原点到中心*/
			ctx.translate(200, 200);
			/*原作为什么要转90度?*/
			//			ctx.rotate(-90*Math.PI/180);

			ctx.beginPath();

			// 外层空心圆盘
			ctx.save();
			/*这里覆盖掉全局的线段样式*/
			ctx.strokeStyle = "blueviolet"
			ctx.lineWidth = 14;
			ctx.beginPath();
			ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);
			ctx.stroke();
			ctx.restore();

			// 时针刻度
			ctx.save();
			for(var i = 0; i < 12; i++) {
				ctx.rotate(30 * Math.PI / 180);
				ctx.beginPath();
				ctx.moveTo(100, 0);
				ctx.lineTo(120, 0);
				ctx.stroke();
			}
			ctx.restore();

			// 分针刻度
			ctx.save();
			ctx.lineWidth = 6
			ctx.strokeStyle = "red";
			for(var i = 0; i < 60; i++) {
				if(i % 5 != 0) {
					ctx.beginPath();
					ctx.moveTo(110, 0);
					ctx.lineTo(120, 0);
					ctx.stroke();
					ctx.closePath();
				}

				/*这一句要放在这里，上面第一根不让画，那么就先转6度*/
				ctx.rotate(6 * Math.PI / 180);
			}
			ctx.restore();

			ctx.closePath();
			ctx.restore();
		}
	</script>

</html>